<template>
  <div class="parcel">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">快递包裹</span>
      <span class="header-wrap-right" @click="showSeach">
        <i class="iconseach iconfont icon-sousuo"></i>
      </span>
    </div>
    <!-- 搜索 -->
    <div class="seach" v-if="srach">
      <van-search
        v-model="value"
        placeholder="请输入快递单号查询"
        shape="round"
        @input = 'getList'
      >
      </van-search>
    </div>
    <!-- 包裹列表 -->
    <div class="parcel-box" ref="HeightAuto">
      <div class="parcel-list" @click="torepairDetail(list.id)" v-for='(list,index) in listData' :key="index">
        <div class="parcel-list-show" v-if="listData!=0">
          <div class="parcel-titleBox">
            <div class="parcel-name">{{list.express_company}}</div>
            <div class="delivery">
              <span><img src="@/assets/images/ic_pickage.png" alt=""></span>
              <span class="type-text">我的包裹</span>
            </div>
          </div>
          <div>
            <div class="quarters">{{list.residential_text}}</div>
          </div>
          <div class="arrival-time">
            <span>到达时间&nbsp;{{list.create_time_text}}</span>
            <span class="time-icon-box">{{list.status_text}}&nbsp;<i class="icon-type iconfont icon-youjiantou"></i></span>
          </div>
        </div>
      </div>
      <Tips v-if="listData==0"/>
    </div>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Search } from 'vant';
import Tips from '../../components/tips'
export default {
  data(){
    return{
     value: '',
     listData:[],
     srach:false
    }
  },
  created(){
    this.getList()
    this.menu()
  },
  methods:{
    menu(){
      window.scrollTo(0, 0)
    },
    showSeach(){
      this.srach = !this.srach
      if(this.srach==true){
        this.$refs.HeightAuto.style.marginTop = '1.85rem'
      }else{
        this.$refs.HeightAuto.style.marginTop = '1.3rem'
        this.value = ''
      }
    },
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
    // 获取包裹列表
    getList(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.parcellist, {
        params: {
          express_number: this.value?this.value:undefined
        }
      })
      .then((response) => {
        if(response.data.code===1){
          this.listData = response.data.data.list
          this.$toast.clear();
        }
      })
      .catch((error) => {
        console.log(error);
        this.$toast.clear();
      });
    },
    // 去详情页
    torepairDetail(id){
      this.$router.push({
        path: '/parcelDetail',
        query: {
          id
        }
      })
    }
  },
  components:{
    [Search.name]:Search,
    Tips
  }
}
</script>
<style>
.parcel .van-field__body input{
  caret-color: #000; /* 光标颜色 */
}
.parcel .van-search{
  background: none!important;
}
.parcel .van-search__action{
  color: #000;
}
</style>

<style scoped>
.parcel{
  min-height: calc(100vh - 1rem);
  background: #f7f6fb;
}
.seach{
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #fff;
}
.parcel .header-wrap .iconback{
  margin-left: .3rem!important;
}
.parcel-box{
  padding-top: 1rem;
}
.parcel-list{
  background: #fff;
  height: 2.2rem;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.parcel-titleBox{
  padding-top: .3rem;
  display: flex;
  height: .4rem;
  line-height: .4rem;
  font-weight: bold;
  font-size: .32rem;
  color: #000;
}
.parcel-name{
  text-indent: .5rem;
  flex:1;
}
.delivery{
  margin-right: .3rem;
  text-align: right;
  flex:1;
}
.delivery span{
  display: inline-block;
}
.delivery img{
  vertical-align: middle;
  width: .34rem;
  height: .35rem;
}
.quarters{
  margin: .12rem 0;
  text-indent: .5rem;
  height: .4rem;
  color: #0EAD69;
}
.arrival-time{
  text-indent: .5rem;
  height: .4rem;
  line-height: .4rem;
  color: #57c5c6;
  display: flex;
}
.arrival-time span{
  flex: 1;
  font-size: .28rem;
}
.arrival-time span:nth-of-type(1){
  flex: 2;
}
.time-icon-box{
  text-align: right;
  margin-right: .18rem;
  color: #FD5585;
}
.type-text{
  font-size: .24rem;
  margin-left: .1rem;
}
.icon-type{
  font-size: .28rem;
}
</style>
